<template>
  <div>
    <el-form ref="myform" :model="formItem" label-width="100px" size="mini" class="form-view">
      <el-row :gutter="40">
        <el-col v-if="formFlag === true" :span="24">
          <el-form-item label="转派详情">
            由二线工程师 {{ formItem.transferUserName }} 转派给 {{ formItem.operatorName }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="故障级别">
            {{ getfailureLevelName(formItem.faultLevel) }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="参与工程师">
            {{ formItem.engineerName }}
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="故障解决情况" prop="context">
            <div class="height-div">
              {{ formItem.context }}
            </div>
          </el-form-item>
        </el-col>
        <el-col v-if="formItem.transfer === true" :span="24">
          <el-form-item label="转派工程师">
            {{ formItem.transferEngineerName }}
          </el-form-item>
        </el-col>
        <el-col v-if="formItem.transfer === true" :span="24">
          <el-form-item label="转派原因">
            <div class="height-div">
              {{ formItem.transferReason }}
            </div>
          </el-form-item>
        </el-col>
        <!-- 资产列表 -->
        <el-col v-if="formItem.assetObjs.length>0" :span="24">
          <div id="资产列表">
            <div class="anthor-info-head">
              <div>
                <el-row :gutter="40">
                  <el-col :span="12">
                    <i class="el-icon-document" agalin /><span>资产明细</span>
                  </el-col>
                </el-row>
              </div>
            </div>
            <div class="anthor-info-body" style="margin:10px">
              <el-table
                :loading="false"
                :data="formItem.assetObjs"
              >
                <el-table-column v-for="column in insideAssetColumns" :key="column.key" :label="column.title" :prop="column.key" :width="column.width" :sortable="column.sortable">
                  <template slot-scope="scope">
                    <column-render :render="column.render" :row="scope.row" :column="column" />
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </el-col>

        <!-- 备品备件列表 -->
        <el-col v-if="formItem.spareParts.length>0" :span="24">
          <div id="备品备件列表">
            <div class="anthor-info-head">
              <div>
                <el-row :gutter="40">
                  <el-col :span="12">
                    <i class="el-icon-document" agalin /><span>备品备件明细</span>
                  </el-col>
                </el-row>
              </div>
            </div>
            <div class="anthor-info-body" style="margin:10px">
              <el-table
                :loading="false"
                :data="formItem.spareParts"
              >
                <el-table-column v-for="column in insideStockColumns" :key="column.key" :label="column.title" :prop="column.key" :width="column.width" :sortable="column.sortable">
                  <template slot-scope="scope">
                    <column-render :render="column.render" :row="scope.row" :column="column" />
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>

import { secondLineDetail as detail } from '@neu/dcom-ui/api/malfunction'
import { findByDictionaryType } from '@neu/dcom-ui/api/dictionary'

const formItem = {
  // 工作流TaskId
  taskId: '',
  // 工单号
  workNum: '',
  // 转派人
  transferUserName: '',
  // 故障级别
  faultLevel: '',
  // 参与工程师
  engineerCode: [],
  // 参与工程师
  engineerName: [],
  // 故障解决情况
  context: '',
  // 选择的资产
  assets: '',
  // 操作人名称
  operatorCode: '',
  // 操作人编码
  operatorName: '',
  // 是否转派 *
  transfer: false,
  // 转派工程师名称
  transferEngineerName: '',
  // 转派工程师编码
  transferEngineerCode: '',
  // 转派原因
  transferReason: '',
  // 资源集合
  assetObjs: [],
  // 备品备件
  spareParts: []
}

export default {
  name: 'SecondLineHandleViewForm',
  props: {
    taskId: {
      required: false,
      type: String,
      default: 'NULL'
    },
    workOrderNum: {
      required: false,
      type: String,
      default: ''
    },
    formFlag: {
      required: false,
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      // 资产的表头
      insideAssetColumns: [
        { title: '资产分类', key: 'assetTypeName' },
        { title: '资产编号', key: 'code' },
        { title: '资产名称', key: 'name' },
        { title: '资产条码', key: 'sequence' },
        { title: '规格型号', key: 'productName' }
      ],
      // 备品备件的表头
      insideStockColumns: [
        {
          title: '货品编号',
          key: 'storckNumber'
        }, {
          title: '备品备件分类',
          key: 'spareTypeName'
        },
        {
          title: '规格型号',
          key: 'specification'
        },
        {
          title: 'SN',
          key: 'sn'
        },
        {
          title: '存放库房',
          key: 'storehouseName'
        },
        {
          title: '单价',
          key: 'unitPrice'
        },
        {
          title: '货品来源',
          key: 'source',
          render: (h, params) => {
            let sourceDesc = ''
            if (params.row.source === 'new') {
              sourceDesc = '合同采购'
            } else if (params.row.source === 'back') {
              sourceDesc = '退库利旧'
            }
            return h('span', [
              h('el-tag', sourceDesc)
            ])
          }
        },
        {
          title: '关联合同',
          key: 'contractName'
        }
      ],
      // 参与工程师集合
      users: [],
      // 所有的故障级别
      availableFailureLevels: [],
      // 编辑的表单内容
      formItem: {
        ...formItem
      }
    }
  },
  created() {
    this.fetch()
    // 故障级别
    findByDictionaryType('failureLevel').then(response => {
      this.availableFailureLevels = response.data
    })
  },
  methods: {
    fetch() {
      if (this.workOrderNum !== 'NULL') {
        detail(this.workOrderNum, this.taskId).then(response => {
          this.formItem = {
            ...response.data,
            engineerName: response.data.engineerName.map(l => l).join(' 、')
          }
        })
      } else {
        this.formItem = {
          ...formItem
        }
      }
    },
    getfailureLevelName(code) {
      const one = this.availableFailureLevels.find(e => e.code === code)
      return one ? one.text : ''
    }
  }
}
</script>

<style lang="scss" scoped>
.height-div {
    min-height: 80px;
    max-height: 100px;
}
</style>
